<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>签名</title>

    <script type="text/javascript" src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jSignature.min.js"></script>
</head>

<body id="sign_body">

    <div style="z-index: 9;position: absolute;width: 100%;">
        <div style="width: 96%;margin-left: 2%;">
            <input id="clear" class="clear" type="button" value="清除" style="background: #FF0000;color: #FFF;border: none;margin-top: 5px;margin-left: 5px;position: absolute;left: 0px;">
            <span style="line-height: 52px;font-size: 18px;display: inline-block;width: 100%;text-align: center;">请在下方签名</span>
            <input id="save" type="button" class="save" style="background-color: #20A53A;color: #FFF;border: none;float: right;margin-top: 5px;margin-right: 5px;position: fixed;right: 0px;top: 0;" value="确认">
        </div>
        <div id="signature" style="height: 100%;"></div>
        <div id="pic"></div>
        <p id="base" style="width:100%;"></p>
    </div>
    <div class="hint" style="display: none;z-index: 999;position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);">
    </div>
    <div class="hint" style="display: none;z-index: 9999;position: absolute;background-color: #FFFFFF;top: 40%;left: 50%;margin-left: -100px;width: 200px;height: 100px;line-height: 100px;text-align: center;border-radius: 8px;">
        正在提交...</div>

    <script type="text/javascript" charset="utf-8">
        mui.plusReady(function () {
            plus.screen.lockOrientation('landscape-secondary');
        });
        $(document).ready(function () {
            $("#signature").jSignature()
        });
        document.getElementById("clear").addEventListener('tap', function () {
            $("#signature").jSignature("reset");
            $("#pic")[0].innerHTML = '';
        });
        document.getElementById("save").addEventListener('tap', function () {
            var datapair = $("#signature").jSignature("getData", "default");
            tanwin(datapair);
        });
        function tanwin(signatureData) {
            let url = ''
            // if (`${getQueryVariable("type")}`) {
            //     url = `${getQueryVariable('url')}/api/principal/new/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            // } else {
            //     url = `${getQueryVariable('url')}/api/principal/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            // }
            if (`${getQueryVariable("type")}` == 'new') {
                url = `${getQueryVariable('url')}/api/principal/new/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            }
            if (`${getQueryVariable("type")}` == 'old') {
                url = `${getQueryVariable('url')}/api/principal/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            }
            if (`${getQueryVariable("type")}` == 'user') {
                url = `${getQueryVariable('url')}/api/teacher/sign`
            }
            console.log('RRRRRRRRRRRRRRRRRR', url)
            $(".hint").show();
            $.ajax({
                url: url,
                data: {
                    sign_image: signatureData,
                    token: getQueryVariable("token")
                },
                headers: {
                },
                method: 'PUT',
                success: function (res) {
                    console.log('resresresresresres', res)
                    if (res.code === 0) {
                        alert(res.msg == 'success' ? '签名成功!' : res.msg);
                    } else {
                        alert('签名失败!');
                    }
                    $(".hint").hide();
                },
                error: function (data) {
                    $(".hint").hide();
                    alert("网络错误");
                }
            });
        }
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = unescape(query).split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        document.getElementById("export").addEventListener('tap', function () {
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            $(i).appendTo($("#pic"));
        });


    </script>
</body>

</html>